<template>
  <div>
    <h1>ref 函数（定义data变量）</h1>
    <ul>
      <li>{{ count }}</li>
      <li @click="toggleShow">控制div是否显示</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 列表 -->
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="addList">新增list</button>
    <hr />
    <div v-if="isShow" class="box"></div>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导出`ref`函数
2. 在setup函数中调用`ref`函数并传入数据（简单类型或者复杂类型）
   写法：const 变量名 = ref(变量值)
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意⚠️：**在setup函数中使用ref结果，需要通过`.value`  访问，
  模板中使用不需要加.value；而且可以重新=号赋值
 */
import { ref } from 'vue'
export default {
  setup () {
    // 1. 定义变量
    // 简单类型
    const count = ref(0)
    const isShow = ref(true)
    const toggleShow = () => {
      // 在js中使用ref定义的变量必须加=》变量名.value
      isShow.value = !isShow.value
    }
    // 定义复杂类型
    const list = ref([1, 2, 3])
    function addList () {
      list.value.push(Math.random() * 1000 + 1)
      // list.value = []
    }
    // 2. 返回给模板
    return { count, isShow, toggleShow, list, addList }
  }
}
</script>
0
<style lang="less" scoped>
.box {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
